<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>

<body>
    <div id="app">
        <el-menu class="el-menu-demo" mode="horizontal" text-align="right" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="1"></el-menu-item>
        </el-menu>
        <div style="position:relative;top:100px;left:300px;">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="账号" icon="el-icon-user" prop="user_name" style="width:300px;">
                    <el-input type="input" v-model="ruleForm.user_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" style="width:300px;">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-user" @click="submitForm('ruleForm')">登陆</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <script>

        const router = new VueRouter({ mode: 'history' })

        new Vue({
            router,
            el: '#app',
            data() {
                return {
                    ruleForm: {
                        user_name: '',
                        password: '',
                    },
                    rules: {
                        user_name: [
                            { required: true, message: '请输入账号', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' }
                        ],
                    }
                };
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {

                            _this = this;

                            fetch('/login', {
                                method: 'POST',
                                headers: { 'content-type': 'application/json; charset=utf-8', },
                                body: JSON.stringify(_this.ruleForm),
                            }).then(response => response.json()).then(json => {

                                if (json.success) {
                                    this.$router.push('/');
                                    this.$router.go(0);
                                } else {
                                    _this.$message.error(json.msg);
                                }
                            });

                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
            }
        });
    </script>
</body>

</html>